<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        #box{
            width:600px;
            height:160px;
            background-color:#eee;
            margin:100px auto 0px;
            padding-top:140px;
        }
        #name{
            width:80px;
            height:40px;
            margin:0px auto;
            text-align: center;
        }
        #btn{
            width:50px;
            height:20px;
            margin:0px auto;
            display:block;
        }

       
    </style>
</head>
<body>
    <div id='box'>
        <div id="name"></div>
        <button id="btn">开始</button>
    </div>
</body>

    <script>
        var btn = document.getElementById("btn");

        var n= document.getElementById("name");

        var list = ['张三','李四','静静','艳艳','贱贱','波波','舒舒','咪咪','雯雯','红红'];

        var num = 0;

        var t = null;

        function demo(){
            num++;

            if(num%2==1)
            {
                t = setInterval(randName,50);

                btn.innerHTML = '暂停';
            }
            else if(num%2==0)
            {
                clearInterval(t);

                 btn.innerHTML = '开始';
            }
        }


        function randName(){
            var max = list.length;

            var min = 0;

            var rand = Math.floor(Math.random() * (max-min)+min);

            n.innerHTML = list[rand];
        }



        btn.onclick = demo;
    </script>
</html>